<script>
/* eslint-disable */
</script>
<template>
	<div class="row">
		<div class="demo-split">
			<Split v-model="split1">
				<div slot="left" class="demo-split-pane">
					<h3>Draggable 1</h3>
					<nestedsource-draggable :tasks="cloneList" :ipt="cloneListIpt" />
				</div>
				<div slot="right" class="demo-split-pane">
					<h3>Nested draggable</h3>
					<nested-draggable :tasks="list" :ipt="listIpt" />
				</div>
			</Split>
		</div>

		<rawDisplayer class="col-3" :value="cloneList" title="cloneList" />
		<rawDisplayer class="col-3" :value="list" title="List" />
	</div>
</template>

<script>
import nestedDraggable from './nested'
import nestedsourceDraggable from './nestedsource'
import rawDisplayer from './raw-displayer'
export default {
	name: 'nested-example',
	display: 'Nested',
	order: 15,
	components: {
		nestedDraggable,
		nestedsourceDraggable,
		rawDisplayer
	},
	data() {
		return {
            split1: 0.5,
            cloneListIpt: [''],
			cloneList: [
				{
                    name: 'var',
                    ipt: [''],
					tasks: []
				},
				{
					name: 'set',
                    ipt: [''],
					tasks: [
						{
							name: 'var',
                            ipt: [''],
							tasks: []
						},
						{
							name: 'equal',
                            ipt: [''],
							tasks: []
						}
					]
				},
				{
					name: 'if',
                    ipt: [''],
					tasks: [
						{
							name: 'condition',
                            ipt: [''],
							tasks: []
						},
						{
							name: 'do',
		                    ipt: [''],
        					tasks: []
						}
					]
				},
				{
					name: 'console.log',
                    ipt: [''],
					tasks: []
				},
				{
					name: 'alert',
                    ipt: [''],
					tasks: []
				}
			],
            listIpt: [''],
			list: []
		}
	}
}
</script>

<style scoped>
.demo-split {
	height: 600px;
	border: 1px solid #dddee1;
}
</style>
